<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="styleSheet" href="/css/laypage.css"/>
    <script  src="/js/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <style type="text/css">
        .searchText {
            position: relative;
            left: 75%;
            background-color: #ddede0;
        }

        #searchBtn {
            color: lightseagreen;
        }

    </style>
</head>
<body>

<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">
                    <section class="panel">
                        <header class="panel-heading" style="color:lightseagreen;">
                            案件信息
                        </header>
                        <div class="panel-body">
                            <div id="app">
                                <input id="-1" class="my btn btn-warning" type="button"
                                       value="待提交案件"/> &nbsp;&nbsp;&nbsp;&nbsp;<input
                                    id="0" class="my btn btn-info" type="button" value="待审核案件"/>
                                &nbsp;&nbsp;&nbsp;&nbsp;<input id="1" class="my btn btn-primary" type="button"
                                                               value="待结算案件"/>&nbsp;&nbsp;&nbsp;&nbsp;<input id="2"
                                                                                                             class="my btn btn-danger"
                                                                                                             type="button"
                                                                                                             value="审核未通过案件"/>
                                &nbsp;&nbsp;&nbsp;&nbsp;<input id="3" class="my btn btn-success" type="button"
                                                               value="已结算案件"/>&nbsp;&nbsp;&nbsp;&nbsp;<#--<input type="text" id="stateSearch" class="stateSearchText"/>&nbsp;&nbsp;<input class="stateSearchText" type="button" value="搜"  id="stateSearchBtn"/>-->
                                <br/>

                                <input type="text" id="search" class="searchText form-group"/>&nbsp;&nbsp;<input class="searchText btn"
                                                                                                      type="button"
                                                                                                      value="搜索"
                                                                                                      id="searchBtn"/>
                                <div id="tableDisplay">
                                    <table class="table table-inbox table-hover">
                                        <tr>
                                            <td>序号</td>
                                            <td>报案人</td>
                                            <td>出险车辆</td>
                                            <td>报案时间</td>
                                        <#--<td>出险时间</td>-->
                                            <td>案发地点</td>
                                            <td>保险套餐</td>
                                            <td>案件备注</td>
                                            <td>申赔金额</td>
                                            <td>理赔专员</td>
                                            <td>案件处理状态</td>
                                            <td>操作</td>
                                        </tr>
                                        <tr v-for="(item,index) in result">
                                            <td>{{index+1}}</td>
                                            <td>{{item.order.user.sname}}</td>
                                            <td>{{item.cars.licenseNum}}</td>
                                            <td>{{item.reportTime}}</td>
                                        <#--<td>{{item.caseTime}}</td>-->
                                            <td>{{item.caseLocation}}</td>
                                            <td>{{item.order.combo.combname}}</td>
                                            <td>{{item.remarks}}</td>
                                            <td>{{item.payAccount}}</td>
                                            <td>{{item.emp.empName}}</td>
                                            <td>
                                                <span v-if="item.caseState==-1" style="color:#f0ad4e;">尚未提交审核申请</span>
                                                <span v-if="item.caseState==0" style="color:#5bc0de">待审核</span>
                                                <span v-if="item.caseState==1" style="color:#428bca">待结算</span>
                                                <span v-if="item.caseState==2" style="color:#d9534f">审核未通过</span>
                                                <span v-if="item.caseState==3" style="color:#5cb85c">已结算</span>
                                            </td>
                                            <td><span v-if="item.caseState==-1"><a href="javascript:void(0);"
                                                                                   @click="updateEvent(item.caseUuid);">修改</a>&nbsp;&nbsp;<a
                                                    href="javascript:void(0);"
                                                    @click="submitEvent(item.caseUuid);">提交申请</a><br/><a
                                                    style="color:orange" href="javascript:void(0);"
                                                    @click="delEvent(item.caseUuid);">删除</a>&nbsp;&nbsp;<a
                                                    href="javascript:void(0);"
                                                    @click="uploadEvent(item.caseId);">资料上传</a></span>
                                                <span v-if="item.caseState==0">审核期间,无权操作</span>
                                                <span v-if="item.caseState==1">结算期间,无权操作</span>
                                                <span v-if="item.caseState==2"><a href="javascript:void(0);"
                                                                                  @click="updateEvent(item.caseUuid);">修改</a>&nbsp;&nbsp;<a
                                                        href="javascript:void(0);" @click="submitEvent(item.caseUuid);">提交申请</a><br/><a
                                                        style="color:orange" href="javascript:void(0);"
                                                        @click="delEvent(item.caseUuid);">删除</a>&nbsp;&nbsp;<a
                                                        href="javascript:void(0);"
                                                        @click="uploadEvent(item.caseId);">资料上传</a></span>
                                                <span v-if="item.caseState==3"><a
                                                        :href="'/case/downLoad.do?caseId='+item.caseId">资料下载</a></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="11">
                                                <div id="page"></div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
        <#include "/foot.html">
    </section>
</section>
</body>
</html>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            result: [],
            curr: 1
        }
    });
    var getCaseList = function (curr) {
        $.ajax({
            type: 'POST',
            url: '/case/caseList.do',
            dataType: 'json',
            data: {
                pageNum: curr || 1,
                pageSize: 10,
                keyword: $("#search").val()
            }, success: function (data) {
                app.result = data.page;
                if (app.result.length == 0) {
                    $("#tableDisplay").css("display", "none");
                    $("#app").find("p").remove();
                    $("#app").append("<p>尚未有相关记录</p>");
                } else {
                    $("#tableDisplay").css("display", "");
                    $("#app").find("p").remove();
                }
                laypage({
                    cont: 'page',
                    pages: data.totalPages,
                    skin: '#336699',
                    first: '第一页',
                    last: '最后一页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getCaseList(obj.curr);
                        }
                    }
                });
            }
        });
    };
    getCaseList();
    $("#searchBtn").click(function () {
        getCaseList();
    });
    $("#stateSearchBtn").click(function () {
        getCaseStateList();
    });
    var getCaseStateList = function (curr, caseState) {
        $.ajax({
            type: 'POST',
            url: '/case/caseStateList.do',
            dataType: 'json',
            data: {
                pageNum: curr || 1,
                pageSize: 10,
                caseState: caseState
            }, success: function (data) {
                app.result = data.page;
                if (app.result.length == 0) {
                    $("#tableDisplay").css("display", "none");
                    $("#app").find("p").remove();
                    $("#app").append("<p>尚未有相关记录</p>");
                } else {
                    $("#tableDisplay").css("display", "");
                    $("#app").find("p").remove();
                }
                laypage({
                    cont: 'page',
                    pages: data.totalPages,
                    skin: '#CD00CD',
                    first: '首页',
                    last: '尾页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getCaseStateList(obj.curr);
                        }
                    }
                });
            }
        });
    };
    $(".my").click(function () {
        var curr = curr || 1;
        var caseState = $(this).attr("id");
        getCaseStateList(curr, caseState);
    });
    var updateEvent = function (uuid) {
        layer.open({
            type: 2,
            title: '修改案件信息',
            fix: false,
            maxmin: true,
            content: '/case/toUpdateCase.do?caseUuid=' + uuid,
            shadeClose: true,
            area: ['1100px', '800px'],
            end: function () {
                /* getCaseList();*/
            }
        });
    };
    var submitEvent = function (uuid) {
        layer.confirm('确认提交申请?', {btn: ['是', '否']}, function () {
            $.ajax({
                type: 'POST',
                url: '/case/submit.do',
                dataType: 'json',
                data: {caseUuid: uuid},
                success: function (data) {
                    if (data) {
                        getCaseList();
                        layer.msg("成功提交", {icon: 6});
                    } else {
                        layer.msg("由于网络原因,提交失败,请稍后重试", {icon: 5});
                    }
                }
            });
        }, function () {

        });
    };
    var delEvent = function (uuid) {
        layer.confirm(
                '确认删除?', {btn: ['是', '否']}, function () {
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: '/case/del.do',
                        data: {
                            caseUuid: uuid
                        }, success: function (data) {
                            if (data) {
                                getCaseList();
                                layer.msg("成功删除", {icon: 6});
                            } else {
                                layer.msg("由于网络原因,删除失败,请稍后重试", {icon: 5});
                            }
                        }
                    });
                }, function () {
                });
    };

    var uploadEvent = function (id) {
        layer.open({
            type: 2,
            title: '文件上传',
            shadeClose: true,
            maxmin: true,
            content: '/case/toUpload.do?caseId=' + id,
            fix: false,
            area: ['500px', '300px'], end: function () {

            }
        });
    };
</script>